<template>
  <div class="label-body">
    <p v-if="data.titel">{{ data.titel }}</p>
    <!-- 不可关闭 -->
    <div
      class="labels"
      v-if="!showCloseLabel"
    >
      <div
        :class="item.isSelClass"
        v-for="item in data.labels"
        :key="item"
        @click="run(item)"
      >
        <div>
          {{ item.name || item.userName }}{{item.num}}
        </div>
      </div>
    </div>
    <!-- 可关闭 -->
    <div
      class="labels"
      v-if="showCloseLabel"
    >
      <div
        class="styleD"
        v-for="item in data.labels"
        :key="item"
        @click="run(item)"
      >
        <van-tag
          :show="showCloseLabel"
          closeable
          size="medium"
          type="primary"
          @close="close"
        >
          标签
        </van-tag>
      </div>
    </div>
  </div>
</template>

<script>
import { Tag } from "vant";
/**
 * 标签集组件
 * 传入数据 data
 * {
        titel: "部门筛选",
        styleType: "A", A:蓝色标签 B 灰色标签 C 外边框
        labels: 標簽列表 [{ name: "標簽名",}]
        status:1=单选：2=多选
    }
 */
export default {
  name: "LabelsBox",
  props: {
    data: Object
  },
  components: {
    [Tag.name]: Tag
  },
  data() {
    return {
      beforItem: {}
    };
  },
  mounted() {
    if (this.data) {
      this.init();
    }
  },
  methods: {
    init() {
      for (let i = 0; i < this.data.labels.length; i++) {
        const label = this.data.labels[i];
        label.isSel = false;
      }
      this.getClass();
    },
    getClass() {
      for (let i = 0; i < this.data.labels.length; i++) {
        const label = this.data.labels[i];
        const isSelClass = label.isSel
          ? this.data.styleType + "-Sel"
          : this.data.styleType;
        label.isSelClass = isSelClass;
      }
    },
    run(item) {
      let getData = {
        type: this.data.lebType
      };
      if (this.data.status == "1") {
        if (this.beforItem)
          this.beforItem.isSelClass = item.isSel = this.data.styleType;
        // 单选
        if (this.beforItem != item || this.beforItem == null) {
          this.beforItem = item;
          item.isSelClass = item.isSel = this.data.styleType + "-Sel";
          getData.id = item.id;
        } else {
          this.beforItem = null;
          item.isSelClass = item.isSel = this.data.styleType;
          getData.id = "";
        }
      } else {
        // 多选
        getData.arr = [];
        item.isSel = !item.isSel;
        item.isSelClass = item.isSel
          ? this.data.styleType + "-Sel"
          : this.data.styleType;
        for (let i = 0; i < this.data.labels.length; i++) {
          const tag = this.data.labels[i];
          tag.isSel && tag.id ? getData.arr.push(tag.id) : "";
        }
      }
      this.$emit("run-parent", getData);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" >
.label-body {
  // padding-top: 30px;
  flex-grow: 1;
  .showBorder {
    padding-bottom: 30px;
    border-bottom: 1px solid #e8e8e8;
  }
  p {
    margin: 16px 0;
    font-size: 28px;
    text-align: left;
  }
  .labels {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    font-size: 24px;
    font-weight: 400;
    height: 100%;
    > div {
      &:nth-child(3n) {
        margin-right: 0;
      }
    }
    .A,
    .A-Sel,
    .B,
    .B-Sel,
    .C,
    .C-Sel,
    .D,
    .D-Sel {
      overflow: hidden;
      width: calc(calc(100% / 3) - 12px);
      max-width: 218px;
      box-sizing: border-box;
      margin: 0 18px 18px 0;
      padding: 10px;
      border-radius: 8px;
    }
    .A {
      color: #288ef4;
      background: #e6f4fe;
    }
    .A-Sel {
      color: #e6f4fe;
      background: #288ef4;
    }
    .B {
      color: #666666;
      background: #f5f5f5;
    }
    .B-Sel {
      color: #e6f4fe;
      background: #288ef4;
    }
    .C {
      color: #666666;
      min-width: 120px;
      background: #fff;
      border: 1px solid #cccccc;
    }
    .C-Sel {
      border: 1px solid #cccccc;
      color: #ffffff;
      background: #288ef4;
    }
    .D {
      box-sizing: border-box;
      color: #666666;
      background: #f5f5f5;
    }
    .D-Sel {
      width: calc(calc(100% / 5) - 12px);
      color: #e6f4fe;
      background: #288ef4;
    }
  }
}
</style>
